<style>
  html,body {
    width: 100%;
    height: 100%;
    background-color: #1c2438;
  }
  .login {
    width: 100%;
    height: 100%;
    background-color: #1c2438;
    position: relative;
  }
  .login .from-wrap{
    position: fixed;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -150px;
    width: 400px;
    height: 240px;
    border-radius: 10px;
    background-color: #fff;
    padding: 20px 30px;
  }
  .login h2 {
    text-align: center;
    margin-bottom: 20px;
  }
  .login FormItem {
    margin-bottom: 15px;
  }
  .login .form-footer {
    text-align: right;
  }
  .ivu-form-item-required .ivu-form-item-label:before {
    display: none;
  }
</style>
<template>
  <div class="login">
    <div class="from-wrap">
      <h2>登录</h2>
      <Form ref="loginData" :model="loginData" :rules="ruleValidate" :label-width="80">
        <FormItem label="Account" prop="acct">
          <Input type="input" v-model="loginData.acct" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem label="Password" prop="pass">
          <Input type="input" v-model="loginData.pass" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem class="form-footer">
          <Button type="prima  ry" @click="handleSubmit('loginData')">Submit</Button>
          <Button type="ghost" @click="handleReset('loginData')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import store from '@/store/store'
import {
  login
} from '@/api/Login'
export default {
  store,
  data () {
    return {
      loginData: {
        acct: '',
        pass: ''
      },
      ruleValidate: {
        acct: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { min: 3, max: 16, message: '账号长度3-16个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { type: 'string', min: 6, max: 16, message: '密码长度6-16个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          var self = this
          // this.$ajax({
          //   method: 'get',
          //   url: '/login',
          //   params: {
          //     username: self.loginData['acct'],
          //     password: self.loginData['pass']
          //   }
          // }).then(function (response) {
          //   self.$Message.success(response.data)
          //   self.$router.push('/home')
          //   console.log(response.data)
          // }).catch(function (error) {
          //   self.$Message.error('提交失败!')
          //   console.log(error)
          // })
          const para = {
            username: self.loginData['acct'],
            password: self.loginData['pass']
          }
          login(para).then(res => {
            self.$Message.success(res.data)
            self.$router.push('/home')
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
